<script setup lang="ts" name="echartsComponent">
import CoreContainer from './CoreContainer.vue';
import StatisticComponent from './StatisticComponent.vue';
import { useRequest } from 'vue-request';
import { getListByConditions } from '@/index';

const { data: getNdeDefectListData, run: getNdeDefectListRun } = useRequest(() =>
  getListByConditions()
);
// setInterval(() => {
//   getNdeDefectListRun();
// }, 10000);
</script>

<template>
  <div class="container">
    <div class="container-header">
      <div class="container-item container-header-item">
        <StatisticComponent title="累计发现缺陷长度（毫米）" :defectList="getNdeDefectListData" />
      </div>
      <div class="container-item container-header-item">
        <StatisticComponent title="本月新增缺陷长度（毫米）" :defectList="getNdeDefectListData" />
      </div>
      <div class="container-item container-header-item">
        <StatisticComponent title="累计发现不合格工件" :defectList="getNdeDefectListData" />
      </div>
      <div class="container-item container-header-item">
        <StatisticComponent title="本月新增不合格工件" :defectList="getNdeDefectListData" />
      </div>
      <div class="container-item container-header-item">
        <StatisticComponent title="累计无缺陷天数" :defectList="getNdeDefectListData" />
      </div>
    </div>
    <div class="container-body">
      <div class="container-body-side">
        <div class="container-item container-body-side-item">
          <HqLineEchart :data="getNdeDefectListData!" title="testMethod" />
        </div>
        <div class="container-item container-body-side-item">
          <HqLineEchart :data="getNdeDefectListData!" title="partType" />
        </div>
        <div class="container-item container-body-side-item">
          <HqLineEchart :data="getNdeDefectListData!" title="makeMethod" />
        </div>
      </div>
      <div class="container-body-middle container-item">
        <CoreContainer :defectList="getNdeDefectListData!" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .container-header {
    flex: 1;
    display: flex;
    flex-direction: row;
    .container-item {
      flex: 1;
    }
  }

  .container-body {
    flex: 6;
    display: flex;
    flex-direction: row;
    .container-body-side {
      flex: 1;
      display: flex;
      flex-direction: column;
      .container-body-side-item {
        flex: 1;
      }
    }
    .container-body-middle {
      flex: 4;
    }
  }
}

.container-item {
  padding: 5px;
  // border: 1px solid red;
}

.container-body-side-item {
  flex: 1;
}
</style>
